<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>查看消息</title>
    <meta name="keywords" content="知果汇"/>
    <meta name="description" content="知果汇"/>
    <link rel="SHORTCUT ICON" href="_IMG_/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="_CSS_/reset.css">
    <link rel="stylesheet" type="text/css" href="_CSS_/common.css">
    <link rel="stylesheet" type="text/css" href="_CSS_/store_center.css"/>
    <style type="text/css">
        html, body {
            width: 560px;
            min-width: 560px;
        }

        .details-box {
            padding: 20px;
            float: left;
            width: 520px;
        }

        .details-title {
            float: left;
        }

        .details-title ul li {
            width: 260px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            float: left;
            color: #999999;
            background: #f0f0f0;
            font-size: 14px;
            cursor: pointer;
        }

        .details-title ul .check {
            color: #ffffff;
            background: #3377c1;
        }

        .details-con {
            margin-top: 10px;
            float: left;
        }

        .details-con .row {
            float: left;
            margin-bottom: 10px;
        }

        .details-con .row .pub-left {
            display: block;
            float: left;
            width: 70px;
            height: 40px;
            letter-spacing: 1px;
            padding-right: 10px;
            line-height: 40px;
            font-size: 14px;
            color: #333333;
            text-align: right;
        }

        .row .pub-right {
            float: left;
            width: 440px;
        }

        .pub-right p {
            line-height: 40px;
            font-size: 14px;
            color: #333333;
        }

        .row .pub-ra {
            position: relative;
        }

        .row .pub-ra p {
            position: absolute;
            bottom: 2px;
            right: 0px;
            color: #666666;
        }

        .row .pub-right textarea {
            width: 420px;
            height: 100px;
            float: left;
            font-size: 14px;
            background: #ffffff;
            padding: 10px;
        }

        .details-con ul li {
            width: 520px;
            font-size: 14px;
            color: #333333;
            border-bottom: 1px solid #c4c4c4;
        }

        .details-con ul .his-last {
            border-bottom: none;
        }

        .details-con ul li p {
            line-height: 32px;
        }

        .details-con ul li .his-title {
            color: #666666;
        }

        .btn-box {
            text-align: center;
            width: 520px;
        }

        .btn-box a {
            display: inline-block;
            width: 90px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #e5e5e5;
            margin-left: 20px;
            border-radius: 5px;
        }

        .send-btn {
            color: #ffffff;
            background: #3377c1;
            border-color: #3377c1;
        }

        .send-btn:hover {
            color: #ffffff;
        }

        .details-cl {
            height: 250px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<div class="details-box">
    <div class="details-title">
        <ul>
            <li class="check">消息</li>
            <li>历史记录</li>
        </ul>
    </div>
    <div class="details-con">
        <div class="row">
            <label class="pub-left">消息:</label>
            <div class="pub-right">
                <p id="content"></p>
            </div>
        </div>
        <div class="row">
            <label class="pub-left">回复:</label>
            <div class="pub-right pub-ra">
                <textarea onKeyUp="textarealength(this,200)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
            </div>
        </div>
        <div class="row">
            <div class="btn-box">
                <a class="msg-btn send-btn" onclick="confirm()" href="javascript:;">发送</a>
                <a class="msg-btn" onclick="cancel()" href="javascript:;">取消</a>
            </div>
        </div>
    </div>
    <div class="details-con details-cl" style="display: none;">
        <ul id="king">
        </ul>
    </div>
</div>

</body>
<script src="_JS_/jquery-1.8.3.min.js"></script>
<script src="_JS_/jquery.base64.js"></script>
<script src="_JS_/jquery.cookie.js"></script>
<script src="_JS_/common.js"></script>
<script src="_P_/layer/layer.js"></script>
<script type="text/javascript" src="_JS_/getMyDate.js"></script>
<script type="text/javascript">

    $(function () {
        postfile();
    })

    function postfile() {
        var id = decodeURI(window.location.href.split("#")[1]);
        $.ajax({
            type: "get",
            url: "{:url('api/form/check_mes')}",
            data: {'id': id},
            dataType: 'jsonp',
            success: function (msg) {
                if (msg.code == 200) {
                    $("#content").text(msg.data.content);

                    if (msg.data.data.length != null) {
                        for (var i = 0; i < msg.data.data.length; i++) {
                            var html = '';
                            if (msg.data.data[i].reply_type == 2) {
                                html += '<li><p class="his-title">买家<span>' + getMyDate(msg.data.data[i].time * 1000) + '</span></p>' +
                                    '<p class="his-con">' + msg.data.data[i].content + '</p></li>';
                            } else {
                                html += '<li><p class="his-title">卖家<span>' + getMyDate(msg.data.data[i].time * 1000) + '</span></p>' +
                                    '<p class="his-con">' + msg.data.data[i].content + '</p></li>';
                            }
                            if (msg.data.data[i].tel != '') {
                                for (var j = 0; j < msg.data.data[i].tel.length; j++) {
                                    if (msg.data.data[i].tel[j].reply_type == 2) {
                                        html += '<li><p class="his-title">买家<span>' + getMyDate(msg.data.data[i].tel[j].time * 1000) + '</span></p>' +
                                            '<p class="his-con">' + msg.data.data[i].content + '</p></li>';
                                    } else {
                                        html += '<li><p class="his-title">卖家<span>' + getMyDate(msg.data.data[i].time * 1000) + '</span></p>' +
                                            '<p class="his-con">' + msg.data.data[i].tel[j].content + '</p></li>';

                                    }
                                }
                            }
                            $("#king").append(html);
                        }
                    }

                } else {
                    layer.msg('未知错误！', {icon: 51});
                }
            }
        })
    }

    /*消息切换*/
    $(document).ready(function () {
        $(".details-title li").on("click", function () {
            var num = $(".details-title li").index(this);
            $(".details-title li").removeClass("check");
            $(this).addClass("check");
            $(".details-con").hide();
            $(".details-con").eq(num).show();
        });
    })

    /*textarea字数限制*/
    function textarealength(obj, maxlength) {
        var v = $(obj).val();
        var l = v.length;
        if (l > maxlength) {
            v = v.substring(0, maxlength);
            $(obj).val(v);
        }
        $(obj).parent().find(".textarea-length").text(v.length);
    }

    //发送
    function confirm(obj) {
        var id = decodeURI(window.location.href.split("#")[1]);
        var text = $("textarea").val();
        $.ajax({
            type: "get",
            url: "{:url('api/form/check')}",
            data: {'id': id, 'content': text},
            dataType: 'jsonp',
            success: function (msg) {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                if (msg.code == 200) {
                    postfile();
                }
            }
        })

    }

    //取消
    function cancel(obj) {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</html>
